<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/tal/list'
            ,title: '账目表'
            ,cols: [[
                {field:'type', title:'种类', width:80}
                ,{field:'money', title:'金额', width:120}
                ,{field:'des', title:'描述', width:200}
                ,{field:'time', title:'时间', width:200}
                ,{field:'t_id', title:'编号', width:200, hide:true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    $.ajax({
                        url:'./tal/del',
                        type:'get',
                        data:{
                            id:data.t_id
                        },//向服务端发送删除的id
                        success:function (res) {
                            if (res==1){
                                layer.close(index);
                            }
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 0,
                    value: data.money,
                    title: '修改'
                }, function(value, index){
                    obj.update({
                        money:value
                    });
                    $.ajax({
                        url:'./tal/update',
                        type:'get',
                        date:{
                            money:value,
                            id:data.t_id
                        },
                        success:function (res) {
                            if (res==1){
                                layer.close(index)
                            }
                        }
                    });
                })

            }
        });
    });

</script>

</body>
</html>